<template>
  <div class="row">
    <!-- 绘制页面主要的结构 设置了"vetur.experimental.templateInterpolationService": true,
            就会根据ts设置有对应的提示
       -->
    <!-- 要三等份所以设置 col-4 -->
    <div v-for="column in columnList" :key="column._id" class="col-4 mb-4">
      <div class="card h-100 shadow-sm">
        <div class="card-body text-center">
          <img :src="column.avatar && column.avatar.fitUrl" :alt="column.title"
            class="rounded-circle border border-light  my-3" />
          <h5 class="card-title">{{ column.title }}</h5>
          <p class="card-text text-left">{{ column.description }}</p>
          <!-- 动态路由，第一种方法：对象形式 设置其 params 为将要到达的 column 的 id -->
          <!-- <router-link :to="{name:'column',params:{id:column.id}}" class="btn btn-outline-primary">进入专栏</router-link> -->
          <!-- 第二种方法：模板字符串的形式 -->
          <router-link :to="`/column/${column._id}`" class="btn btn-outline-primary">进入专栏</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
// PropType对定义了 type 的 prop 执行运行时验证 需要用这个propType指明规定的构造类型
import { defineComponent, PropType, computed } from "vue";
import { ColumnProps } from "@/store";
import { addColumnAvatar } from "../helper";
export default defineComponent({
  name: "ColumnList",

  // 传入的参数有：
  props: {
    list: {
      /*  这里特别有一点，我们现在的 Array 是没有类型的，只是一个数组，
        我们希望它是一个 ColomnProps 的数组，那么我们是否可以使用了类型断言直接写成 ColomnProps[]，显然是不行的 ，
        因为 Array 是一个数组的构造函数不是类型，
        我们可以使用 PropType 这个方法，它接受一个泛型，讲 Array 构造函数返回传入的泛型类型。*/
      type: Array as PropType<ColumnProps[]>,
      required: true
    }
  },
  // 设置当没有头像的时候使用默认图
  setup(props) {
    const columnList = computed(() => {
      return props.list.map(column => {
        addColumnAvatar(column, 50, 50);
        // if (!column.avatar) {
        //   // 此时没有头像的话就要用assets文件夹下的头像
        //   // 这里的 require 是 webpack 帮我们处理的静态资源 vue-cli 运行打包的过程底层是 webpack，
        //   // 有了 webpack，我们可以使用 import 或者 require 这类语句引入不同的模块
        //   column.avatar = { fitUrl: require("@/assets/column.jpg") };
        // } else {
        //   // 阿里云 缩放到 50长 50宽
        //   column.avatar.fitUrl =
        //     column.avatar.fitUrl + "?x-oss-process=image/resize,m_fill,h_50,w_50";
        // }
        return column;
      });
    });
    return { columnList };
  }
});
</script>

<style lang="less" scoped>
.card-body img {
  width: 50px;
  height: 50px;
}
</style>
